<template>
<div>
    <el-card class="box-card">
        <!--真实信息填写-->
        <el-form label-width="80px">
            <el-form-item label="头像">
                <img :src="loginInfo.avatar" style="float:left;width: 145px;height: 145px;border-radius: 10px">
                <!--上传组件开始-->
                <el-upload
                    action="http://192.168.88.130:28082/upload/image/user-avatar"
                    name="file"
                    :limit=1
                    list-type="picture-card"
                    :on-preview="handlePictureCardPreview"
                    :on-success="handleSuccess"
                    :on-remove="handleRemove">
                    <i class="el-icon-plus"></i>
                </el-upload>
                <el-dialog :visible.sync="dialogVisible">
                    <img width="100%" :src="dialogImageUrl" alt="">
                </el-dialog>
                <!--上传组件结束-->
            </el-form-item>
            <!--TODO 修改密码需要输入原密码-->
            <!--                    <el-form-item label="密码">
                                    <el-input type="password" style="width: 200px" placeholder="请输入新密码"></el-input>
                                </el-form-item>-->
            <el-form-item label="所属医院">
                <el-input style="width: 300px" v-model="doctorInfo.hospital" ></el-input>
            </el-form-item>
            <!--选择所属科室-->
            <el-form-item label="所属科室" prop="department">
                <el-select style="width: 300px" v-model="doctorInfo.department" placeholder="请选择所属科室">
                    <el-option v-for="item in departTitle" :label="item.depTitle" :value="item.id"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="手机号">
                <el-input style="width: 300px" v-model="doctorInfo.phone" ></el-input>
            </el-form-item>

            <el-form-item>
                <el-button type="success" @click="submitUserForm()">保存信息</el-button>
            </el-form-item>
        </el-form>
    </el-card>
</div>
</template>

<script>
import BaseUrl from "@/http/BaseUrl";
import TokenAxios from "@/http/TokenAxios";

export default {
    data(){
        return {
            imageUrl: '',
            dialogImageUrl: '',
            dialogVisible: false,
            loginInfo:[],
            doctorInfo:[],
            departTitle:[]
        }
    },
    methods: {
        // 保存信息的操作
        submitUserForm(){
            let upload={
                id:this.loginInfo.id,
                avatar:this.loginInfo.avatar,
                department:this.doctorInfo.department,
                hospital:this.doctorInfo.hospital,
                phone:this.doctorInfo.phone
            }
            console.log("loginAvat="+this.loginInfo.avatar)

            if (this.imageUrl!==""){

                upload.avatar=this.imageUrl;
                this.loginInfo.avatar=this.imageUrl;
            }
            let url=BaseUrl.POST_DOCTOR+'/doctor/info/update';
            console.log(url);
            console.log("upload:"+upload)
            TokenAxios.post(url,upload).then((response)=>{
                if (response.data.state===20000){
                    // localStorage.this.loginInfo=JSON.stringify(this.loginInfo);
                    localStorage.setItem('loginInfo', JSON.stringify(this.loginInfo))
                    location.reload();
                }
            })

        },
        handleRemove(file, fileList) {
            console.log(file, fileList);
            this.imageUrl="";
            console.log(file,fileList);
            let url=BaseUrl.USER_ALL+'/user/image/remove?url='+file.response.data;
            TokenAxios.post(url).then((response)=>{
                if (response.data.state===20000){
                    this.$message.success("服务器文件删除成功");
                }
            })
        },
        handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
        },
        handleSuccess(response,file,fileList){
            this.imageUrl=response.data.url;
            console.log("imageUrl="+this.imageUrl)
        },
        loadCurrentLoginInfo(){
            let loginInfoString=localStorage.getItem('loginInfo')

            this.loginInfo = JSON.parse(loginInfoString);
            if (!this.loginInfo) {
                this.$router.push('/login/user');
                return;
            }else if (this.loginInfo.role!==3&&this.loginInfo.role!==4){
                this.$message.error('无权访问');
                this.$router.push('/home');
                return;
            }
        },
        //获取医生信息
        loadDocInfo(){
            let url= BaseUrl.POST_DOCTOR+'/doctor/info/listInfo';
            console.log(url);
            TokenAxios.get(url).then((response)=>{
                if (response.data.state===20000){
                    this.doctorInfo=response.data.data;
                    console.log(this.doctorInfo)
                }
            })
        },
        //加载所有科室信息
        loadDepartment(){
            let depUrl=BaseUrl.INDEX+'/encyclopedia/encList/departments';

            this.axios.get(depUrl).then((response)=>{
                let jsonResult=response.data;
                if (jsonResult.state===20000){
                    this.departTitle=response.data.data;
                }
            })
        }
    },
    created() {
    },
    mounted() {
        this.loadCurrentLoginInfo();
        this.loadDocInfo();
        this.loadDepartment();

    }
}
</script>
<style>
body{
    background-color: rgb(241,242,243);
}
</style>
